<!--agents,developer,hostel-->
<template>
  <div class="business-class">
    <div class="pad-btm">
      <!--Agents-->
      <section  class="box-border box-pd" style="padding-bottom:0;">
        <header class="nav-header">
          <h2 class="h2">{{$t('m.Agents')}}</h2>
          <p>{{$t('m.Onlinepropertymanagementtool')}}</p>
        </header>
        <div class="agents-icons box-border" style="padding-top:1em;">
          <div class="icon-left-box">
            <img src="../../../static/agents-icon1.jpg">
          </div>
          <div class="icon-right-box">
            <div class="right-icons">
              <img src="../../../static/agents-icon2.jpg">
            </div>
            <div class="right-icons">
              <img src="../../../static/agents-icon3.jpg">
            </div>
          </div>
        </div>
        <div class="agents-icons box-border">
          <div class="flex-1 flex-mg flex-moblie" style="margin-right: 13em;">
            <img src="../../../static/app1.png">
          </div>
          <div class="flex-2">
            <div class="max-len">
              <h3>{{$t('m.Transactionmanagement')}}</h3>
              <p>{{$t('m.Streamlineyourbusiness')}}</p>
            </div>
          </div>
        </div>
        <div class="agents-icons box-border">
          <div class="flex-2 flex-moblie">
            <div class="max-len">
              <h3>{{$t('m.Transactiondatawithcentralized')}}</h3>
              <p>{{$t('m.Accessandupdatetransactions')}}</p>
            </div>
          </div>
          <div class="flex-1 flex-mg">
            <img src="../../../static/app2.png">
          </div>
        </div>
        <div class="agents-icons">
          <div class="flex-1 flex-mg flex-moblie" style="margin-right: 13em;">
            <img src="../../../static/app3.jpg">
          </div>
          <div class="flex-2">
            <div class="max-len">
              <h3>{{$t('m.Getmorecommissions')}}</h3>
              <p>{{$t('m.Accesstohundredsofdevelopers')}}</p>
            </div>
          </div>
        </div>
      </section>
      <!--Developers-->
      <section  class="box-border box-pd">
        <header class="nav-header">
          <h2 class="h2">{{$t('m.Developers')}}</h2>
          <p>{{$t('m.Sellpropertiesfasterbyadvertising')}}</p>
        </header>
        <div class="agents-icons box-border" style="padding-top:1em;">
          <div class="icon-left-box">
            <img src="../../../static/dev-icons1.jpg">
          </div>
          <div class="icon-right-box">
            <div class="right-icons">
              <img src="../../../static/dev-icons2.jpg">
            </div>
            <div class="right-icons">
              <img src="../../../static/dev-icons3.jpg">
            </div>
          </div>
        </div>
        <div class="agents-icons box-border">
          <div class="flex-1 flex-mg flex-moblie" style="margin-right: 13em;">
            <img src="../../../static/app-dev1.jpg">
          </div>
          <div class="flex-2">
            <div class="max-len">
              <h3>{{$t('m.Collaboratewithagents')}}</h3>
              <p>{{$t('m.Increaseyoursales')}}</p>
            </div>
          </div>
        </div>
        <div class="agents-icons" style="padding-bottom:0;">
          <div class="flex-2 flex-moblie" style="margin-right: 13em;">
            <div class="max-len">
              <h3>{{$t('m.Selldirectlytobuyers')}}</h3>
              <p>{{$t('m.Reachtomorebuyers')}}</p>
            </div>
          </div>
          <div class="flex-1 flex-mg">
            <img src="../../../static/app-dev2.jpg">
          </div>
        </div>
      </section>
      <!--Hostel Landlords-->
      <section  class="box-pd">
        <header class="nav-header">
          <h2 class="h2">{{$t('m.HostelLandlords')}}</h2>
          <p>{{$t('m.Getmorerentersby')}}</p>
        </header>
        <div class="agents-icons box-border" style="padding-top:1em;">
          <div class="icon-left-box">
            <img src="../../../static/hotel-icon1.jpg">
          </div>
          <div class="icon-right-box">
            <div class="right-icons">
              <img src="../../../static/hotel-icon2.jpg">
            </div>
            <div class="right-icons">
              <img src="../../../static/hotel-icon3.jpg">
            </div>
          </div>
        </div>
        <div class="agents-icons">
          <div class="flex-1 flex-mg flex-moblie" style="margin-right: 13em;">
            <img src="../../../static/app-hotel1.png">
          </div>
          <div class="flex-2">
            <div class="max-len">
              <h3>{{$t('m.Advertiseyourhostel')}}</h3>
              <p>{{$t('m.Displaytorenters')}}</p>
            </div>
          </div>
        </div>
      </section>
    </div>
    <div class="index-footer-box">
      <div class="index-footer">
        <router-link to="/businessClass" class="footer-items">
          <h3>{{$t('m.Products')}}</h3>
          <p>{{$t('m.AgentDeveloperHostellandlord')}}</p>
        </router-link>
        <router-link to="/contact" class="footer-items">
          <h3>{{$t('m.Aboutus')}}</h3>
          <p>{{$t('m.Contact')}}</p>
        </router-link>
        <a href="https://www.facebook.com/bestpropertymyanmar" target="_blank" onclick="ga('send', 'event','Facebook','click','https://www.facebook.com/')" class="footer-items">
          <h3>{{$t('m.Followus')}}</h3>
          <p>Facebook</p>
        </a>
        <p class="pte-ltd">2017 &copy; Bestproperty Pte Ltd.</p>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'businessClass',
    created(){
      this.menu();
    },
    methods: {
      menu() {
        window.scrollTo(0,0);
      }
    }
  }
</script>
<style>
  .business-class{
    font-size: 16px;
  }
  .business-class a{
    cursor: pointer;
    text-decoration: none;
    color: #2c3e50;
  }
  .business-class .box-border {
    border-bottom: 1px solid #e0e0e0 !important
  }
  .business-class section .nav-header {
    text-align: center
  }
  .business-class .box-pd {
    padding: 3em 0
  }
  .business-class .box-pd .h2 {
    margin: 0 0 .9em;
    color: #f60;
    text-align: center;
    /*letter-spacing: -.015em;*/
    font-weight: 700;
    font-size: 2em
  }
  .business-class .agents-icons {
    display: flex;
    margin: 0 auto;
    padding: 3.5em 0 4em;
    width: 60%
  }
  .business-class .agents-icons .icon-left-box {
    margin-right: 1.5em;
    flex: 2
  }
  .business-class .agents-icons .icon-right-box {
    display: flex;
    flex: 1;
    flex-direction: column
  }
  .business-class .agents-icons img{
    display: block;
    width: 100%;
    height: 100%
  }
  .business-class .agents-icons .icon-right-box .right-icons {
    margin-bottom: 1.5em;
    flex: 1
  }
  .business-class .agents-icons .icon-right-box .right-icons:last-child {
    margin-bottom: 0
  }
  .business-class .agents-icons .flex-mg {
    margin: 0 2.5em
  }
  .business-class .agents-icons h3 {
    margin: 0 0 .2em;
    color: #3e3e3e;
    text-align: left;
    font-weight: 700;
    font-size: 1.5em;
    line-height: 1.5em
  }
  .business-class .agents-icons .flex-1 {
    flex: 1
  }
  .business-class .agents-icons .flex-2 {
    flex: 2
  }
  .business-class .index-footer-box{
    background: rgb(242, 242, 242);
  }
  .business-class .index-footer{
    padding:2em 0;
    width: 75%;
    margin:0 auto;
  }
  .business-class .index-footer h3{
    margin:0;
    font-size: 1.05em;
  }
  .business-class .index-footer p{
    margin: .5em 0;
    font-size: 0.9em;
  }
  .business-class .index-footer .footer-items{
    display: inline-block;
    min-width: 220px;
    margin-right: 1.5em;
  }
  .business-class .index-footer .pte-ltd{
    margin: 3.5em 0 0 0;
  }
  .pad-btm{
    padding-bottom:182px;
  }
  .business-class .index-footer-box{
    position: absolute;
    bottom:0;
    left: 0;
    right: 0;
  }
</style>
